@import "./theme.scss";
$maxWidth: 750px;


// 默认类名
@mixin box($padding: false, $margin: 0 auto 20px auto, $w: 710px) {
  width: $w;
  margin: $margin;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;

  @if $padding  !=false {
    @include padding($padding);
  }
}

@mixin flex($arrange: row, $align: center, $direction: center) {
  display: flex;
  flex-direction: $arrange;
  align-items: $align;
  justify-content: $direction;
}

@mixin wh($w: 100%, $h: 100%) {
  width: $w;
  height: $h;
}


@mixin font($size: 30px, $weight: 400, $color: #222, $line: false) {
  font-size: $size;
  font-weight: $weight;
  color: $color;

  @if $line  !=false {
    line-height: $line;
  }
}

@mixin padding($p: 0 40px) {
  padding: $p;
  box-sizing: border-box;
}

// 单行溢出...处理
@mixin oneEllipsis {
  white-space: nowrap; //断行处理：无断行
  text-overflow: ellipsis; //文字溢出处理：省略号
  overflow: hidden; //溢出处理：隐藏
}

@mixin maxWidthAuto {
  max-width: $maxWidth;
  margin-left: 50%;
  transform: translateX(-50%);
}

@mixin position($type: absolute, $p: tl, $t: 0, $l: 0, $z: false) {
  position: $type;

  @if $p==tl {
    top: $t;
    left: $l;
  }

  @if $p==tr {
    top: $t;
    right: $l;
  }

  @if $p==bl {
    bottom: $t;
    left: $l;
  }

  @if $p==br {
    bottom: $t;
    right: $l;
  }

  @if $z  !=false {
    z-index: $z;
  }
}

// 多行溢出...
@mixin moreEllipsis($h: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $h;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}